$(document).ready(function() {

	// 获取数据
	var data = JSON.parse(localStorage.getItem('data'));
	var classes = JSON.parse(localStorage.getItem('classes'));

	// 刷新数据
	function render() {
		let str = JSON.stringify(data);
		localStorage.setItem('data', str);
	}

	// 滚动条样式
	$(".mCustomScrollbar").mCustomScrollbar({
		theme: "minimal-dark"
	});

	// 设置时钟
	var clock;
	clock = $('.clock').FlipClock({
		clockFace: 'TwentyFourHourClock'
	});

	// 渲染今日课表
	var td_class = $('#time-table tr td:last-child');
	td_class.splice(3, 1); // 去掉午休
	function showTimeTable() {
		for (let i = 0; i < td_class.length; i++) {
			$(td_class[i]).text(classes[`${day}`][`class${i+1}`]);
		}
	}

	// 获取当天日期,当天24点重新获取时间,并重新渲染课表
	var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
	var timer;
	var day;

	function getMyDate() {
		let oDate = new Date();
		let y = oDate.getFullYear();
		let m = oDate.getMonth() + 1;
		let d = oDate.getDate();
		let os = oDate.getTime();
		let nDate = new Date(`${y}-${m}-${d} 23:59:59`);
		let ns = nDate.getTime();
		day = oDate.getDay();
		$('#date').text(y + '年' + m + '月' + d + '日' + ' ' + arr[day]);
		showTimeTable();
		timer = setTimeout(getMyDate, Math.floor((ns - os) / 1000));
	}
	getMyDate();

	// 创建日历
	var mySchedule = new Schedule({
		el: '#schedule-box',
	});

	// 出勤率饼状图
	var myChart1 = echarts.init(document.getElementById('att-echart'));
	var option1 = {
		color: ['#f38181', '#95e1d3', '#ffc5a1', '#eaffd0'],
		tooltip: {
			trigger: 'item',
			formatter: "{a} <br/>{b} : {c} ({d}%)"
		},
		series: [{
			name: '出勤情况',
			type: 'pie',
			radius: '50%',
			center: ['50%', '60%'],
			data: data['attendance'],
			itemStyle: {
				emphasis: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 0, 0, 0.5)'
				}
			}
		}]
	};
	myChart1.setOption(option1);

	// 人数统计柱状图
	var myChart2 = echarts.init(document.getElementById('sta-echart'));
	var option2 = {
		color: ['#f38181'],
		tooltip: {
			trigger: 'axis',
			axisPointer: { // 坐标轴指示器，坐标轴触发有效
				type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
			},

		},
		grid: {
			left: '6%',
			right: '6%',
			bottom: '4%',
			top: '12%',
			containLabel: true
		},
		xAxis: [{
			type: 'category',
			data: data['statistics']['class'],
			axisTick: {
				alignWithLabel: true
			}
		}],
		yAxis: [{
			type: 'value'
		}],
		series: [{
			name: '直接访问',
			type: 'bar',
			barWidth: '50%',
			data: data['statistics']['num']
		}]
	};
	myChart2.setOption(option2);


	// 图表自适应
	window.onresize = function() {
		myChart1.resize();
		myChart2.resize();
	}

	// 备忘录
	var mmr_ol = $('#memoire-ol');
	var mmr_ol_con = $('#mCSB_2_container');
	var mmr_add_btn = $('.memoire-add span');
	var mmr_input = $('#memoire-input');
	// 备忘录展示数据
	function showMemoire() {
		$('#memoire-ol li').remove();
		for (let i = 0; i < data['memoire'].length; i++) {
			mmr_ol_con.append(
				`<li>
			${data['memoire'][i]}
			<span class="iconfont">&#xee7b;</span>
			</li>`);
		}
	}
	showMemoire();


	// 删除记录
	mmr_ol.on('click', 'span', function() {
		let index = $(this).index('.memoire-ol li span');
		$(`#memoire-ol li:eq(${index})`).remove();
		data['memoire'].splice(index, 1);
		render();
	});

	// 增加记录
	mmr_add_btn.on('click', function() {
		let text = mmr_input.val();
		if (text.trim()) {
			let li = $(`<li>${text}<span class="iconfont">&#xee7b;</span></li>`);
			mmr_ol_con.append(li);
			data['memoire'].push(text);
		}
		mmr_input.val("");
		render();
	});

	// 公告板展示数据
	var board_ul_con = $('#mCSB_3_container');

	function showBoard() {
		$('#board-ul li').remove();
		for (let i = 0; i < data['board'].length; i++) {
			board_ul_con.append(
				`<li>
			${data['board'][i]['text']}
			<span class="person">${data['board'][i]['person']}</span>
			<span class="time">${data['board'][i]['time']}</span>
			</li>`
			);
		}
	}
	showBoard();

	// 监听页面数据改变
	window.addEventListener('storage', function(e) {
		switch (e.key) {
			case 'data':
				data = JSON.parse(localStorage.getItem('data'));
				showMemoire();
				showBoard();
				break;
			case 'classes':
				classes = JSON.parse(localStorage.getItem('classes'));
				showTimeTable();
				break;
			default:
				break;
		}

		// myChart1.setOption(option1);
		// myChart2.setOption(option2);
	});
});
